<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>{{title}}-nodeJS</title>
    <link rel="stylesheet" href="/lib/zui/css/zui.min.css">
    </link>
    <link href="/lib/zui/lib/uploader/zui.uploader.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
    <script src="/lib/zui/js/zui.min.js"></script>
    <script src="/lib/zui/lib/uploader/zui.uploader.min.js"></script>
    <style>
        .table td {
            vertical-align: middle !important;
        }

        .head-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: center;
            -webkit-background-size: cover;
            background-size: cover;
            border: 1px solid #ddd;
            box-shadow: 0px 1px 2px #999;
        }
    </style>
</head>

<body>
    <div class="container" style="padding-top:20px;">

        <div class="row">
            <div class="col-md-8">
                <!-- <h2 style="text-align:left;">用户列表</h1> -->
                <table class="table table-striped" style="box-shadow:0px 1px 3px #eee;">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>头像</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{each users}}
                        <tr>
                            <td>{{$value.id}}</td>
                            <td>
                                <div class="head-image" style="background-image: url({{$value.headImg}});"></div>
                            </td>
                            <td>{{$value.userName}}</td>
                            <td>{{$value.password}}</td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-danger" href="/delete?id={{$value.id}}"><i
                                            class="icon icon-trash"></i>删除</a>
                                    <a class="btn" href="#"><i class="icon icon-edit"></i>修改</a>
                                </div>
                            </td>
                        </tr>
                        {{/each}}

                    </tbody>
                </table>
                <ul class="pager" data-ride="pager" data-page="1" data-rec-total="{{users.length}}"></ul>
            </div>
            <div class="col-md-4">
                <!-- <h2 style="text-align:center;">注册用户</h1> -->
                <form action="/formData" method="post"
                    style="border:solid 1px #eee;padding:10px;background:#eee;border-radius:3px;box-shadow:0px 0px 10px #eee;">
                    <div class="form-group">
                        <label for="exampleInputAccount1">用户名</label>
                        <input type="text" name="name" class="form-control" id="exampleInputAccount1"
                            placeholder="电子邮件/手机号/用户名">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" name="password" class="form-control" id="exampleInputPassword1"
                            placeholder="数字+字母">
                    </div>

                    <div id='uploaderExample2' class="uploader form-group" data-ride="uploader" data-url="/uploadImg">
                        <label for="exampleInputAccount1">头像</label>
                        <div class="uploader-message text-center">
                            <div class="content"></div>
                            <button type="button" class="close">×</button>
                        </div>
                        <div class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
                        <div class="uploader-actions">
                            <div class="uploader-status pull-right text-muted"></div>
                            <button type="button" class="btn btn-link uploader-btn-browse"><i
                                    class="icon icon-plus"></i>
                                选择文件</button>
                            <button type="button" class="btn btn-link uploader-btn-start"><i
                                    class="icon icon-cloud-upload"></i>
                                开始上传</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary btn-block">注册</button>
                        </div>
                        <div class="col-md-6" style="line-height:32px;color:#999;text-align:right;">
                            <a>已有帐号？去登录</a>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#uploaderExample2').uploader({
                url: '/upload',
                responseHandler: function (responseObject, file) {
                    console.log(responseObject.response)
                    // 当服务器返回的文本内容包含 `'error'` 文本时视为上传失败
                    // if (responseObject.response.indexOf('error')) {
                    //     return '上传失败。服务器返回了一个错误：' + responseObject.response;
                    // }
                }
            });

            $.ajax({
            //提交数据的类型 POST GET
            type:"POST",
            //提交的网址
            contentType: 'application/json',
            url:"/test",
            //提交的数据   该参数为属性值类型的参数
         //（和url?Name="sanmao"&Password="sanmapword"一样）后台若为SpringMVC接受，注明@RequestParam
            data:JSON.stringify({
                "newPlacementAddVo": {
                    "memberId": 605080606512,
                    "mediumId": 40305412446397,
                    "placementName": "测试广告位4",
                    "adPullMode": "SDK",
                    "osType": "Android",
                    "scene": "Flash",
                    "subScene": "LoginReward",
                    "subSceneDescription": null,
                    "placementImageUrl": "/img/placementScene/68364ee1b648434c8e2865fa16bf8c46.png",
                    "renderType": "Normal",
                    "informationPlacementType": "Normal",
                    "adCrtTypeList": ["IMAGE"],
                    "adCrtSizeId": 2,
                    "adCrtTemplateId": null,
                    "nativePlacement": {
                        "linkHasIcon": true,
                        "linkHasImage": true,
                        "linkHasTitle": true,
                        "linkHasDesc": true,
                        "appHasIcon": true,
                        "appHasImage": true,
                        "appHasName": true,
                        "appHasDesc": true,
                        "appHasRating": true,
                        "appHasPrice": true,
                        "appHasDownloadCount": true
                    },
                    "bidSettingStrategy": 0,
                    "filterRule": {
                        "filterCategoryIds": []
                    },
                    "informationPlacementPosition": ["EndText", "ReadText", "TopBanner"],
                    "normalRenderVersion": 1,
                    "enableExperiment": false,
                    "adCrtTemplateIds": [],
                    "templateVersion": 1
                }
            }),
            //返回数据的格式
            datatype: "JSON",//"xml", "html", "script", "json", "jsonp", "text".
                   
            success:function(data){
                console.log(data)
            },
         
            //调用出错执行的函数
            error: function(){
                //请求出错处理
            }         
         });
        })
    </script>
</body>

</html>